/**
 * Created by Administrator on 2016/8/18.
 */
$(function(){
   //当文档加载完成才执行

    function resize (){
        //获取屏幕宽度
        var windowWidth = $(window).width();

        //判断屏幕属于大还是小
        var isSmallScreen = windowWidth < 768;
        //根据大小为界面上的每一张轮播图设置背景
        //$('#main_ad > .carousel-inner > .item')
        $('#main_ad > .carousel-inner > .item').each(function(i,item){
            var $item = $(item);//拿到的是dom对象 需要转换jQuery对象
            var imageSrcStyle = isSmallScreen ? $item.data('image-small'):$item.data('image-large');

            //设置背景
            $item.css('backgroundImage','url("'+imageSrcStyle+'")');
            //因为需要小图时尺寸等比例变化,所以小图时使用img方式
            if(isSmallScreen){
                $item.html('<img src="'+imageSrcStyle+'" alt="">');
            }
            else {
                //防止变小图时拉大会掉图
                $item.empty();
            }
        });
    }

    //trigger 手动触发
    $(window).on('resize',resize).trigger('resize');

    //初始化tooltips
    $('[data-toggle="tooltip"]').tooltip();

    //控制横向标签页
    var $ulcontainer = $('.nav-tabs');
    //获取所有子元素的宽度和
    var width = 30;
    //遍历子元素
    $ulcontainer.children().each(function(index,element){
        width += element.clientWidth;
    });
    //此时width等于所有li的宽度总和
    //判断当前ul宽度是否超出屏幕,如果超出就显示横向滚动
    if(width > $(window).width()){
        $ulcontainer.css('width',width)
            .parent().css('overflow-x','scroll');
    }


    //获取手指在轮播图元素上的一个滑动方向

    //手指触摸开始时记录一下手指所在的坐标X

    //结束触摸时记录最后手指所在的坐标X

    //获取界面上的轮播图容器
    var $carousel = $('.carousel');
    //注册滑动事件
    var startX;
    $carousel.on('touchstart',function(e){
        startX = e.originalEvent.touches[0].clientX;
        console.log(startX);
    });

    var endX;
    $carousel.on('touchmove',function(e){
        endX = e.originalEvent.touches[0].clientX;

    });

    var offset = 50;
    $carousel.on('touchend',function(){
        console.log(startX > endX ? '左' : '右');
        //控制精度
        //获取每次运动的距离
        var distance = Math.abs(startX - endX);
        if (distance > offset){
            //方向变化
            $(this).carousel(startX > endX ? 'next' : 'prev');
        }
    });


    //根据获得方向选择上一张或者下一张
});